<template>
    <div>
        <div :class="scrollClass?'status_title_fixed':'status_title'">
            <div class="status_tab">
                <p :class="{hot:indexTab == 0}" @click="tabSwitch(0)"><span>全部</span></p>
                <p :class="{hot:indexTab == 2}" @click="tabSwitch(2)"><span>待发货</span></p>
                <p :class="{hot:indexTab == 1}" @click="tabSwitch(1)"><span>待收货</span></p>
                <p :class="{hot:indexTab == 3}" @click="tabSwitch(3)"><span>待评价</span></p>
            </div>
        </div>
        <div v-show="scrollClass" style="height:3rem;"></div>
        <div
             v-infinite-scroll="moreList"
             infinite-scroll-disabled="loading"
             infinite-scroll-immediate-check = "true"
             infinite-scroll-distance="100">
            <div class="couponDtlTab1" v-show="indexTab == 0 ">
                <div class="noOrder" v-show="noOrder">您还没有订单哦</div>
                <div class="orderList whiteBg" v-for="(item,index) in orderList" :key="index" >
                    <div class="order_title">
                        <span class="position">{{item.mchtName}}</span>
                        <span class="status" v-show="item.orderState=='shipped'">快递正在路上</span>
                        <span class="status" v-show="item.orderState=='unship'">等待店家发货</span>
                        <span class="status" v-show="item.orderState=='receive'">提货成功</span>
                    </div>
                    <div class="coupon_order_coupon">
                        <div class="couponDiv">
                          <coupon-denomination :item="item"></coupon-denomination>
                        </div>
                        <div class="card_info">
                            <p class="card_name">{{item.name}}</p>
                            <p class="card_time">有效期至：{{item.validatyEnd | strDate(3)}}</p>
                            <p class="card_del"><span>已售出&nbsp;&nbsp;{{item.soldnum}}</span>
                                &nbsp;&nbsp;<span>已使用&nbsp;&nbsp;&nbsp;{{item.usednum}}
                                </span><span class="card_number">X{{item.couponNum}}</span></p>
                        </div>
                    </div>
                    <div class="order_status_del" ref="statusDel0" @click="more(index)" v-show="(item.orderState=='shipped') ||(item.orderState=='receive')">
                        <p ><span class="del_title">查看订单详情</span>
                            <i :class="(index==currentIndex)&&noTouchBeSure ? 'icon iconfont icon-iconfontunfold' : 'icon iconfont icon-down'"></i></p>
                    </div>
                    <div class="more_del" v-if="(index==currentIndex)&&noTouchBeSure" v-show="(item.orderState=='shipped') || (item.orderState=='receive')">
                        <p class="more_del_tot"><span class="more_del_left">收货人</span><span class="more_del_right">{{item.receName}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">收货手机</span><span class="more_del_right">{{item.receMobile}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">收货地址</span><span class="more_del_right">{{item.receAddress}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">快递公司</span><span class="more_del_right">{{item.expresscompany}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">快递单号</span><span class="more_del_right">{{item.expressnum}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">订单号</span><span class="more_del_right">{{item.orderId}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">交易时间</span><span class="more_del_right">{{orderTime}}</span></p>
                    </div>
                    <p class="beSure" v-show="item.orderState=='shipped'" @click="beSure(index)">确认收货</p>
                    <p class="beSure" v-show="item.orderState=='receive'" @click="goComment(index)" v-if="!(item.commState=='finish')">评一下</p>
                    <p class="beSured" v-show="item.orderState=='receive'&&(item.commState=='finish')">已评论</p>
                    <div v-if="(index==currentIndex) && beSureSuccess" class="beSureSuccess">
                        <div class="success_box">
                            <p class="icon" @click="turnOffBox(index)"><i class="iconfont icon-shanchu"></i></p>
                            <img src="../../images/makeSureOredr.png" />
                            <p class="success_txt">我已经收到货了</p>
                            <span class="tellMcht">告知商家一声</span>
                            <p class="comment" @click="goComment(index)">评一下</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="couponDtlTab1" v-show="indexTab == 1 ">
                <div class="orderList whiteBg" v-for="(item,index) in orderList" :key="index" v-show="item.orderState=='shipped'" >
                    <div class="order_title">
                        <span class="position">{{item.mchtName}}</span>
                        <span class="status">快递正在路上</span>
                    </div>
                    <div class="coupon_order_coupon">
                        <div class="couponDiv">
                          <coupon-denomination :item="item"></coupon-denomination>
                        </div>
                        <div class="card_info">
                            <p class="card_name">{{item.name}}</p>
                            <p class="card_time">有效期至：{{item.validatyEnd | strDate(3)}}</p>
                            <p class="card_del"><span>已售出&nbsp;&nbsp;{{item.soldnum}}</span>
                                &nbsp;&nbsp;<span>已使用&nbsp;&nbsp;&nbsp;{{item.usednum}}
                                </span><span class="card_number">X{{item.couponNum}}</span></p>
                        </div>
                    </div>
                    <div class="order_status_del" ref="statusDel1" @click="more(index)">
                        <p ><span class="del_title">查看订单详情</span>
                            <i :class="(index==currentIndex)&&noTouchBeSure ? 'icon iconfont icon-iconfontunfold' : 'icon iconfont icon-down'"></i></p>
                    </div>
                    <div class="more_del" v-if="(index==currentIndex)&&noTouchBeSure">
                        <p class="more_del_tot"><span class="more_del_left">收货人</span><span class="more_del_right">{{item.receName}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">收货手机</span><span class="more_del_right">{{item.receMobile}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">收货地址</span><span class="more_del_right">{{item.receAddress}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">快递公司</span><span class="more_del_right">{{item.expresscompany}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">快递单号</span><span class="more_del_right">{{item.expressnum}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">订单号</span><span class="more_del_right">{{item.orderId}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">交易时间</span><span class="more_del_right">{{orderTime}}</span></p>
                    </div>
                    <p class="beSure" @click="beSure(index)">确认收货</p>
                    <div v-if="(index==currentIndex) && beSureSuccess" class="beSureSuccess">
                        <div class="success_box">
                            <p class="icon" @click="turnOffBox(index)"><i class="iconfont icon-shanchu"></i></p>
                            <img src="../../images/makeSureOredr.png" />
                            <p class="success_txt">我已经收到货了</p>
                            <span class="tellMcht">告知商家一声</span>
                            <p class="comment" @click="goComment(index)">评一下</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="couponDtlTab1" v-show="indexTab == 2 ">
                <div class="orderList whiteBg" v-for="(item,index) in orderList" :key="index" v-show="item.orderState=='unship'">
                    <div class="order_title">
                        <span class="position">{{item.mchtName}}</span>
                        <span class="status">等待店家发货</span>
                    </div>
                    <div class="coupon_order_coupon">
                        <div class="couponDiv">
                          <coupon-denomination :item="item"></coupon-denomination>
                        </div>
                        <div class="card_info">
                            <p class="card_name">{{item.name}}</p>
                            <p class="card_time">有效期至：{{item.validatyEnd | strDate(3)}}</p>
                            <p class="card_del"><span>已售出&nbsp;&nbsp;{{item.soldnum}}</span>
                                &nbsp;&nbsp;<span>已使用&nbsp;&nbsp;&nbsp;{{item.usednum}}
                                </span><span class="card_number">X{{item.couponNum}}</span></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="couponDtlTab1" v-show="indexTab == 3 ">
                <div class="orderList whiteBg" v-for="(item,index) in orderList" :key="index" v-show="item.orderState=='receive'&&!(item.commState=='finish')" >
                    <div class="order_title">
                        <span class="position">{{item.mchtName}}</span>
                        <span class="status">提货成功</span>
                    </div>
                    <div class="coupon_order_coupon">
                        <div class="couponDiv">
                          <coupon-denomination :item="item"></coupon-denomination>
                        </div>
                        <div class="card_info">
                            <p class="card_name">{{item.name}}</p>
                            <p class="card_time">有效期至：{{item.validatyEnd | strDate(3)}}</p>
                            <p class="card_del"><span>已售出&nbsp;&nbsp;{{item.soldnum}}</span>
                                &nbsp;&nbsp;<span>已使用&nbsp;&nbsp;&nbsp;{{item.usednum}}
                                </span><span class="card_number">X{{item.couponNum}}</span></p>
                        </div>
                    </div>
                    <div class="order_status_del" ref="statusDel3" @click="more(index)">
                        <p ><span class="del_title">查看订单详情</span>
                            <i :class="index==currentIndex ? 'icon iconfont icon-iconfontunfold' : 'icon iconfont icon-down'"></i></p>
                    </div>
                    <div class="more_del" v-if="index==currentIndex">
                        <p class="more_del_tot"><span class="more_del_left">收货人</span><span class="more_del_right">{{item.receName}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">收货手机</span><span class="more_del_right">{{item.receMobile}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">收货地址</span><span class="more_del_right">{{item.receAddress}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">快递公司</span><span class="more_del_right">{{item.expresscompany}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">快递单号</span><span class="more_del_right">{{item.expressnum}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">订单号</span><span class="more_del_right">{{item.orderId}}</span></p>
                        <p class="more_del_tot"><span class="more_del_left">交易时间</span><span class="more_del_right">{{orderTime}}</span></p>
                    </div>
                    <p class="beSure" @click="goComment(index)">评一下</p>
                </div>
            </div>

            <no-data v-if="noInfo"></no-data>
            <div class="lastInfoMore noMore" v-if="!moreInfo" v-show="orderList.length>3">没有更多</div>
            <go-top v-show="goTopState" ref="goTopId" class="goTop_component"></go-top>
        </div>
    </div>
</template>

<script>
    import * as types from '../../vuex/types.js'
    import { mapState } from 'vuex'
    import couponList from '../../componentes/global/couponList.vue'
    import couponNum from '../../componentes/global/couponNum.vue'
    import * as types1 from '../../vuex/appendType'
    import listLoading from '../../componentes/global/listLoading.vue'
    import getData from '../../service/getData'
    import comment from '../coupon/comment.vue'
    import {
        MessageBox,
        Indicator,
        Toast,
    } from 'mint-ui'
    export default{
        components:{
            listLoading,comment
        },
        data(){
            return{
                indexTab:0,
                orderList:'',
                currentIndex:'-1',
                status:false,
                orderState:false,
                noOrder:false,
                dataEnd:'',
                orderTime:'',
                allClick:[9999,9999],
                currentOrderId:'',
                currentMchtId:'',
                currentPage:0,
                scrollClass:false,
                loading:true,
                noMoreCoupon:true,
                noInfo:false,
                moreInfo:true,
                beSureSuccess:false,
                commentedOrderId:'',
                chirldInfo:{},
                noTouchBeSure:true,//点击确认收货的时候，详情不会展开
                goTopState:false,
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo
            })
        },
        beforeRouteLeave(to, from, next){
            // 避免返回时未清除定时器
            if (this.$refs.goTopId) {
                this.$refs.goTopId.clear();
            }
            window.removeEventListener('scroll', this.gotopScroll);
            window.removeEventListener('scroll', this.handleScroll);
            next()
        },
        created:function(){
            this.moreList();
            window.addEventListener('scroll', this.gotopScroll);
            window.addEventListener('scroll', this.handleScroll);
        },
        methods:{
            //返回顶部按钮
            gotopScroll(){
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollHeight=document.documentElement.clientHeight||document.body.scrollTop;
                if (scrollTop>=scrollHeight+50) {
                    this.goTopState = true
                } else {
                    this.goTopState = false
                }
                //回到顶部过程中用户滚动滚动条
                if (scrollTop <= 0) {
                    if (this.$refs.goTopId) {
                        this.$refs.goTopId.clear();
                    }
                }
            },
            //内容超过十条，分页加载
            clickMoreList(){
//                console.log('tab'+this.indexTab)
                if(!this.noMoreCoupon){//防止重复点击
                    return
                }
                this.noMoreCoupon = false;
                this.currentPage = this.currentPage+1;
//                console.log(this.currentPage)
                getData.getQueryOrder({
                    method:'post',data:{ "aoData": JSON.stringify([{name:"iDisplayStart",value:this.currentPage},{name:"iDisplayLength","value": 10}]),"orderState": this.indexTab}
                },this.userInfo.usrId).then(rep=>{//this.userInfo.usrId//7704
                    //console.log(rep);
                    if(rep.respCode == "00"){
                        console.log(rep)
                        if (this.currentPage <= 1) {
                            this.orderList = rep.content.result;
                        } else {
                            this.orderList = rep.content.result.concat(this.orderList)
                        }
                        //如果没有符合条件的数据，显示没有数据
                        if(rep.content.total<=0){
                            this.noInfo=true;
                        }else{
                            this.noInfo=false;
                        }
                        if(rep.content.result){
                            if(rep.content.result.length < 10){
                                setTimeout(function(){this.noMoreCoupon = true;},300);
                                this.moreInfo=false;
                            }
                            if(rep.content.result.length == 10){//如果列表数据够10条，开启下拉加载
                                this.moreInfo=true;
                                this.loading = false;
                                this.noMoreCoupon = true;
                            }
                        }else{
                            setTimeout(function(){this.noMoreCoupon = true;},300);
                        }
                        for(var i =0; i< this.orderList.length; i++)
                        {
                            this.dataEnd = this.changeDate(this.orderList[i].validatyEnd);

                        }
                    }
                }) .catch(function(rep){
                    setTimeout(function(){this.noMoreCoupon = true;},300);
                });
            },
            moreList(){
                this.loading = true;
                this.noMoreCoupon = true;
                this.clickMoreList();
            },
            //固定tab选项卡
            handleScroll() {
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                if (scrollTop>=40) {
                    this.scrollClass=true;
                } else {
                    this.scrollClass=false;
                }
            },
            //确认收货
            beSure(index){
                if(this.status){
                    this.noTouchBeSure=true;
                }else{
                    this.noTouchBeSure=false;
                }
                this.currentIndex = index;
                this.currentOrderId=this.orderList[this.currentIndex].orderId;
                this.currentMchtId=this.orderList[this.currentIndex].mchtId;
                MessageBox({
                    title: '提示',
                    message: '是否确认收货?',
                    showCancelButton: true
                }).then(action => {
                    if(action=='confirm'){
                        // Indicator.open('确认收货中...');
                        this.$store.commit('changeState', true)
                        getData.makeSureOrder({
                            method:'post',data:{"mchtId":this.currentMchtId,"orderId":this.currentOrderId}
                        },this.userInfo.usrId).then(rep=>{
                            if(rep.respCode == "00"){
                                this.beSureSuccess = true;
                            }
                        })
                    }else if(action=='cancel'){
                        console.log('取消');
                    }
                });
            },
            //刷新
            refresh: function() {
                this.$router.replace({ path: '/refresh',});
            },
            //选项卡切换
            tabSwitch:function(num){
                var me=this;
                this.indexTab = num;
                this.$store.commit(types.SHOP_COMMENTS);//初始化列表
                this.$store.commit(types.COUPON_COMMENTS);//初始化列表
                this.$store.commit("COUPON_PAGES");//评论分页初始化
                this.noMoreCoupon=true;
                this.currentPage=0;
                this.clickMoreList()
            },
            //查看收货详情
            more(index){
                //在点击卡券的时候先出栈第一个前一次的点击卡券的下标
                this.allClick.shift();
                //之后在压栈当前点击的卡券下标
                this.allClick.push(index);
                this.noTouchBeSure=true;
                if (!this.status) {
                    this.currentIndex = index;
                    this.status=true;
                    this.$refs.statusDel0[index].style.borderBottom='none';
                    this.$refs.statusDel1[index].style.borderBottom='none';
                    this.$refs.statusDel3[index].style.borderBottom='none';
                    this.orderTime = this.changeDate(this.orderList[index].orderDate)
                }else{
                    this.currentIndex = -1;
                    this.status=false;
                    this.$refs.statusDel0[index].style.borderBottom='1px solid #f0f0f0';
                    this.$refs.statusDel1[index].style.borderBottom='1px solid #f0f0f0';
                    this.$refs.statusDel3[index].style.borderBottom='1px solid #f0f0f0';
                    this.orderTime = this.changeDate(this.orderList[index].orderDate)
                }
            },
            //改变时间格式
            changeDate(date){
                date = date.toString();
                var year = date.substring(0,4);
                var month = date.substring(4,6);
                var day = date.substring(6,8);
//                this.dataEnd=year + '.'+month+ '.'+day;
                return year + '.'+month+ '.'+day;

            },
            //关掉评一下弹出框
            turnOffBox(index){
                this.noTouchBeSure=true;
                this.currentIndex = index;
                this.beSureSuccess = false;
                this.refresh();
            },
            //跳转到评论页面
            goComment(index){
                this.noTouchBeSure=true;
                this.currentIndex = index;
                this.$router.push({name:'doComment', query:{mchtId:this.orderList[this.currentIndex].mchtId,couponNos:'',orderId:this.orderList[this.currentIndex].orderId}})
            }
        }
    }
</script>
<style scoped>
    .status_tab{margin-bottom:.473rem;padding-top: 1rem;background:#fff;border-bottom:1px solid #f5f5f5;height:3.1rem;color:#666;text-align:center;line-height:1.6rem}
    .status_tab p{float:left;box-sizing:border-box;width:25%;height:1.6rem}
    .status_tab p span{display:inline-block;padding-bottom:.5rem;height:100%;color:#656565;font-weight: bold;font-size:1rem;}
    .status_tab .hot span{border-bottom:2px solid #ec4e8a;color:#ec4e8a;display: inline-block;padding-bottom:2rem;}
    .order_title .status{color:#ec4e8a}
    .order_status_del{border-bottom: 1px solid #f0f0f0;border-top: 1px solid #f0f0f0}
    .order_status_del .icon-down,.order_status_del .icon-iconfontunfold {position:absolute;right:0.64rem;color:#666;}
    .more_del{min-height:13rem;padding-bottom: .667rem;border-bottom: 1px solid #f0f0f0;padding-top:.667rem;}
    .more_del_tot{line-height:1.7rem;min-height:1.7rem;overflow:hidden;}
    .more_del_left{float:left;color:#333;}
    .more_del_right{min-height:1.7rem;float:right;margin-right:0.64rem;color:#666;overflow:hidden;width:16rem;text-align:right;}
    .beSure{float:right;line-height:2.3rem;width:6.67rem;padding:0 .5rem;background:#ec4e8a;text-align:center;color:#fff;margin:.667rem 0;border-radius:.2rem;}
    .beSured{float:right;line-height:2.3rem;width:6.67rem;padding:0 .5rem;background:#f0f0f0;text-align:center;color:#666;margin:.667rem 0;border-radius:.2rem;}
    .coupon_order_coupon .card_info .card_time{line-height:1.5rem;}
    .coupon_order_coupon .card_info .card_del{font-size:.9rem;line-height:2rem;}
    .coupon_order_coupon .card_info .card_del .card_number{position:absolute;right:0;color:#333;font-weight:bold;font-size:1rem;}
    .noOrder{color:#333;position:absolute;left:50%;top:50%;transform: translate(-50%,-50%)}
    .status_title_fixed{position:fixed;top:0;left:0;width:100%;z-index:99;}
    .beSureSuccess{width: 100%;  height: 100%;  background: rgba(0,0,0,.8);  position: fixed;  left: 0;  top: 0;  z-index: 100;}
    .success_box{position:absolute;  width:66%;  height:33%;  top:20%;  left:16.4%;  background:#ec4e8a;  border-radius: .2rem;  color:#fff;  text-align: center;  box-sizing: border-box;  padding-top:.5rem;  overflow: hidden;  }
    .success_box img{width:4.5rem;  height:3.6rem;  padding-top:1rem;  padding-bottom:.3rem;  transform: translateX(1.2rem);  }
    .success_box i {padding-right:.8rem;}
    .success_box .icon{float:right;}
    .tellMcht{font-size:.8rem;}
    .comment{height:2rem;  line-height:2rem;  width:6.6rem;  background:#fff;  color:#ec4e8a;  border-radius:.2rem;  transform: translateX(4.9rem);  margin-top:1rem;  }
    .success_txt{font-weight:bold;}
    .status{font-size:1rem;}
    .goTop_component{z-index:98;}
</style>
